<!DOCTYPE html>
<html>

<head>
  <title>Assignment1</title>
  <script src="d3.min.js"></script>
  <script src="d3-v6-tip.js"></script>
  <script src="jquery-3.4.1.min.js"></script>
  <script src="d3.layout.cloud.js"></script>
  <link rel="stylesheet" href="d3-tip.css">
</head>

<body>
  <svg width="1600" height="800" id="mainsvg" class="svgs"></svg>
  <script>
      const svg = d3.select('svg');
      const width = svg.attr('width');
      const height = svg.attr('height');
      const margin = {top: 60, right: 30, bottom: 60, left: 150};
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;
      const mainGroup = svg.append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`)

      var fill = d3.schemeCategory10;
      console.log(fill);
      // const fill = d3.scaleOrdinal(d3.schemeCategory20);

      data = [{text: "Hello", size: 4}, {text: "world", size: 7},{text: "Hello", size: 4}, {text: "world", size: 7},{text: "Hello", size: 4}, {text: "world", size: 7},{text: "Hello", size: 4}, {text: "world", size: 7},{text: "Hello", size: 4}, {text: "world", size: 7},{text: "Hello", size: 4}, {text: "world", size: 7}]
      var layout = d3.layout.cloud()
          .size([500, 500])
          .words(data.map(function(d) {
            return {text: d.text, size: d.size * 10, test: "haha"};
          }))
          .padding(5)
          .rotate(function() { return ~~(Math.random() * 180) - 90; })
          .font("Impact")
          .fontSize(function(d) { return d.size; })
          .on("end", draw);

      layout.start();

      function draw(words) {
        mainGroup.append('g')
            .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
          .selectAll("text")
            .data(words)
          .enter().append("text")
            .style("font-size", function(d) { return d.size + "px"; })
            .style("font-family", "Impact")
            .style("fill", function(d, i) { return fill[i%10]; })
            .attr("text-anchor", "middle")
            .attr("transform", function(d) {
              return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
            })
            .text(function(d) { return d.text; });
      }
    </script>
</body>

</html>